<!--test.vue-->
<template>
  <div style="width: 100%; height: 100%" ref="echartsBox">
    <div id="flying-lines"></div>
    <v-chart ref="echarts" class="chart" :option="option" :key="key" />
  </div>
</template>

<script>
import * as echarts from "echarts";
import linePointData from "./linePointData";
import geoCoordMap from "./geoCoordMap";
const Bmap = require("echarts/extension/bmap/bmap");
import { loadBMap } from "./mapConfig.js";
function convertData(data) {
  var pointData = [];
  var lineData = [];
  for (var i = 0; i < data.length; i++) {
    let device = data[i];
    if (!device.lng || !device.lat) {
      continue;
    }
    let toName = device.province ? device.province : "";
    lineData.push({
      fromName: "客流量",
      toName: toName,
      coords: [
        [device.lng, device.lat],
        [120.204299, 30.261068]
      ]
    });
    pointData.push({
      name: toName,
      value: [device.lng, device.lat, device.deviceCount]
    });
  }
  return {
    lineData,
    pointData
  };
}
console.log("geoCoordMap", geoCoordMap);
// import mapData from "./map.json";

export default {
  name: "BaseMap1",
  // props: {
  //   mapOptions: {
  //     type: Object,
  //     default: () => {
  //       const Obj = {};
  //       return Obj;
  //     }
  //   }
  // },
  // watch: {
  //   mapOptions: {
  //     handler(val) {
  //       console.log("mapOptions", val);
  //       this.option = val;
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // },
  data() {
    return {
      option: {},
      option1: {
        backgroundColor: "transparent",
        title: {
          text: '景区客流来源',
          subtext: "统计时间：5月",
          // sublink: "http://www.pm25.in",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item"
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#031628"
                }
              },
              {
                featureType: "land",
                elementType: "geometry",
                stylers: {
                  color: "#000102"
                }
              },
              {
                featureType: "highway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#000000"
                }
              },
              {
                featureType: "highway",
                elementType: "geometry.stroke",
                stylers: {
                  color: "#147a92"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#000000"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry.stroke",
                stylers: {
                  color: "#0b3d51"
                }
              },
              {
                featureType: "local",
                elementType: "geometry",
                stylers: {
                  color: "#000000"
                }
              },
              {
                featureType: "railway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#000000"
                }
              },
              {
                featureType: "railway",
                elementType: "geometry.stroke",
                stylers: {
                  color: "#08304b"
                }
              },
              {
                featureType: "subway",
                elementType: "geometry",
                stylers: {
                  lightness: -70
                }
              },
              {
                featureType: "building",
                elementType: "geometry.fill",
                stylers: {
                  color: "#000000"
                }
              },
              {
                featureType: "all",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#857f7f"
                }
              },
              {
                featureType: "all",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#000000"
                }
              },
              {
                featureType: "building",
                elementType: "geometry",
                stylers: {
                  color: "#022338"
                }
              },
              {
                featureType: "green",
                elementType: "geometry",
                stylers: {
                  color: "#062032"
                }
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#465b6c"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#022338"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#ffffff",
                  visibility: "off"
                }
              },
            //   {
            //     "featureType": "label",
            //     "elementType": "labels.text.stroke",
            //     "stylers": {
            //         "color": "#444444",
            //         "visibility": "on"
            //     }
            // }
            ]
          },
          
        },
        series: [
          {
            name: "",
            type: "lines",
            coordinateSystem: "bmap",
            symbol: ["none", "arrow"],
            zlevel:2,
            effect: {
              symbolSize: 3,
              show: true,
              scaleSize: 2,
              period: 20,
              color: "rgba(55, 121, 253,0.6)",
              shadowBlur: 0, //轨迹粗细
              constantSpeed: 100
            },
            lineStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#58B3CC"
                    },
                    {
                      offset: 1,
                      color: "#ffbf31"
                    }
                  ],
                  false
                ),
                width: 0, //飞线粗细
                opacity: 0,
                curveness: 0.3
              }
            },
            data: convertData(linePointData).lineData
          },
          {
            //终点点位样式
            name: "杭州",
            type: "effectScatter",
            coordinateSystem: "bmap",

            // "zlevel": 2,
            symbolSize: 10,
            rippleEffect: {
              color:'#f52e5a',
              period: 2,
              scale: 3,
              brushType: "stroke"
            },
            itemStyle:{
              color:'#f52e5a',
            },
            //终点坐标
            data: [[120.204299, 30.261068]]
          },
          {
            name: '人次',
            type: 'effectScatter',
            rippleEffect: {
                          color:'#f52e5a',
                          period:4,
                          scale: 5,
                          brushType: "fill"
                        },
                        symbolSize: function (val) {
                          return val[2] / 80;
                      },
            coordinateSystem: 'bmap', // 坐标系使用bmap
            itemStyle:{
              color:'#f52e5a',
              shadowBlur:20,
              shadowColor:'#f52e5a',
            },
            data: geoCoordMap
          }

          // {
          //   name: "pm2.5",
          //   type: "scatter",
          //   coordinateSystem: "bmap",
          //   data: convertData(citydata),
          //   encode: {
          //     value: 2
          //   },
          //   symbolSize: function(val) {
          //     return val[2] / 10;
          //   },
          //   label: {
          //     formatter: "{b}",
          //     position: "right"
          //   },
          //   itemStyle: {
          //     color: "#ddb926"
          //   },
          //   emphasis: {
          //     label: {
          //       show: true
          //     }
          //   }
          // },
        ],
        // visualMap: {	// 视觉映射组件
        //   type: 'continuous',
        //   min: 0,
        //   max: 1000,
        //   calculable: true,
        //   inRange: {
        //             color: ['rgb(245, 46, 90)']
        //         },
        //   textStyle: {
        //     color: '#fff'
        //   }
        //     }
      },
      key: 1
    };
  },
  methods: {},
  mounted() {
    this.$nextTick(() => {
      loadBMap("Nz7up5ZuLFFWcyVDVMpcvoZGbD5KkWkU").then(() => {
        this.option = this.option1;
        //  this.renderQianxi()
      });
    });
    // setTimeout(()=>{
    // this.renderMap();
    // },1000)

    // let MutationObserver =
    //   window.MutationObserver ||
    //   window.WebKitMutationObserver ||
    //   window.MozMutationObserver;
    // let element = this.$refs["echartsBox"];
    // this.observer = new MutationObserver(mutationList => {
    //   for (let mutation of mutationList) {
    //     console.log(mutation);
    //   }
    //   console.log("自适应");
    //   // this.$refs['echarts'].resize()
    //   this.key += 1;
    // });
    // this.observer.observe(element, {
    //   attributes: true,
    //   attributeFilter: ["style"],
    //   attributeOldValue: true
    // });
  },
  beforeDestroyed() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer.takeRecords();
      this.observer = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.hj {
  color: #ffbf31;
}
</style>